<template>
    <div class="outer">
      <el-row class="detail-top-nav">{{studentName}}缴费记录</el-row>
      <el-table :data="dataList" ref="multipleTable" style="width: 100%">
        <el-table-column prop="schoolPaymentSkuName" label="缴费项目"></el-table-column>
        <el-table-column prop="shouldPay" label="缴费金额" :formatter="priceFilter" ></el-table-column>
        <el-table-column prop="payMethods" label="支付类型" :formatter="typeFormat"></el-table-column>
        <el-table-column label="付款人">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.orderDetail" :key="index" class="table_item">{{item.userName}}</div>
          </template>
        </el-table-column>
        <el-table-column label="支付时间">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.orderDetail" :key="index" class="table_item">{{item.payTime | timeFormat('yyyy-MM-dd hh:mm:ss')}}</div>
          </template>
        </el-table-column>
        <el-table-column label="流水号"  width="300px">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.orderDetail" :key="index" class="table_item">{{item.orderNo}}</div>
          </template>
        </el-table-column>
        <el-table-column label="交易付款金额">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.orderDetail" :key="index" class="table_item">{{item.price | currency}}</div>
          </template>
        </el-table-column>
        <el-table-column label="减免项" width="300px">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.discountInfo" :key="index" class="table_item">{{item.reason}}<span style="color:red">减免金额:</span>{{item.num | currency}}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>
<script>
  import {getPaymentInfo} from 'api/school/student/index'
  import common from 'src/util/common'
  import {currency, timeFormat} from 'src/filter/index'
  export default {
    data () {
      return {
        id: parseInt(common.params('id')),
        studentName: common.params('name'),
        dataList: [] // 缴费记录列表
      }
    },
    created () {
      this.getData(1)
    },
    methods: {
      getData (int) { // 获取数据
        getPaymentInfo({
          studentId: this.id
        }).then(res => {
          this.dataList = res.data
          this.pageObj = res.page
        })
      },
      priceFilter (row, col, value) {
        return currency(value)
      },
      dateFilter (row, col, value) {
        return timeFormat(value, 'yyyy-MM-dd hh:mm:ss')
      },
      typeFormat (row, col, value) {
        return parseInt(value) === 1 ? '全额支付' : '分笔支付'
      }
    }
  }
</script>
<style>
  .outer {
    padding: 20px;
  }
  .table_item {
    line-height: 2;
  }
  .detail-top-nav {
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
  }
</style>